<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮换--单个翻页</title>
    <link rel="stylesheet" href="css.css">
    <script>
        window.onload = function () {
            var oMoveBox =document.getElementById('move-box'),
                oUl = oMoveBox.getElementsByTagName('ul')[0];
                oUl.innerHTML += oUl.innerHTML;
            var aImages = oMoveBox.getElementsByTagName('img'),
                oWidth = aImages[0].offsetWidth,
                oPrev = document.getElementById('prev'),
                oNext = document.getElementById('next'),
                oIco = document.getElementById('ico'),
                oNav = oIco.getElementsByTagName('a'),
                len = aImages.length,
                half = len/2,
                now = 0,
                timer = null;
            //自动播放
            aotoScoll();
            function aotoScoll() {
                timer = setInterval(function () {
                    oNext.onclick();
                },2500);
            }
            //鼠标移入停止，移开自动播放
            oMoveBox.onmouseover = function () {
              clearInterval(timer);
            };
            oMoveBox.onmouseout = function () {
              aotoScoll();
            };
            //点击滚动
            oPrev.onclick = function () {
                if(now > 0){
                    now--;
                } else {
                    now = half - 1;
                    oMoveBox.style.left = -(oWidth *half) + 'px';
                }
                scoll();
            };
            oNext.onclick = function () {
                if(now < len - 1){
                    now++;
                } else {
                    now = half;
                    oMoveBox.style.left = -(oWidth * (half - 1)) + 'px';
                }
                scoll();
            };
            function scoll() {
                toMove(oMoveBox,'left',-now*oWidth);
                tabMove();
            };
            function tabMove() {
              for (var i=0;i<oNav.length;i++){
                  oNav[i].className = '';
                  oNav[now%4].className = 'ico-active';
              }
            };
            function toMove(obj,attr,target,fn) {
                obj.timer && clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    var onOff = true;
                    var current = parseInt(css(obj,attr));
                    var speed = (target - current)/9;
                    speed = speed > 0? Math.ceil(speed):Math.floor(speed);
                    if (current != target){
                        onOff = false;
                        obj.style[attr] = current + speed +'px';
                    }
                    if (onOff){
                        clearInterval(obj.timer);
                        obj.timer = null;
                        fn&&fn();
                    }
                },30);
            };
            //动态获取元素样式的兼容
            function css(obj, attr){
                if(obj.currentStyle){
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj, false)[attr];
                }
            }
        }
    </script>
</head>
<body>
    <div id="warp">
        <div id="move-box">
            <ul  class="clearfix">
                <li>
                    <a href="javascript:;"><img src="img/楚乔传01.jpg" alt=""></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="img/楚乔传02.jpg" alt=""></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="img/楚乔传03.jpg" alt=""></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="img/楚乔传04.jpg" alt=""></a>
                </li>
            </ul>
        </div>
        <div id="ico">
            <a href="javascript:;" class="ico-active"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
        <a href="javascript:;" id="prev" class="btn"><img src="img/left.png" alt=""></a>
        <a href="javascript:;" id="next" class="btn"><img src="img/right.png" alt=""></a>
    </div>
</body>
</html>